react配置antd |
您所在的位置：网站首页 › react 配置override › react配置antd |
|
antd文档 yarn add antd -s 完整引入在App.css中引入 @import '~antd/dist/antd.css';在组件中引入 import { Button } from 'antd'; render() { return ( Button ) }如果需要自定义主题颜色 安装@craco/craco可以无需暴露webpack进行配置覆盖 yarn add @craco/cracopackage.json更改 "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", + "start": "craco start", + "build": "craco build", + "test": "craco test", }安装less yarn add craco-less首先把 src/App.css 文件修改为 src/App.less，然后修改样式引用为 less 文件。 src/App.js - import './App.css'; + import './App.less';src/App.less - @import '~antd/dist/antd.css'; + @import '~antd/dist/antd.less';在根目录新增craco.config.js如src同级 const CracoLessPlugin = require('craco-less'); module.exports = { plugins: [ { plugin: CracoLessPlugin, options: { lessLoaderOptions: { lessOptions: { modifyVars: { '@primary-color': '#1DA57A' },//主题色 javascriptEnabled: true, }, }, }, }, ], }; 按需引入 npm install babel-plugin-import -s删除App.less引入的antd.less craco.config.js完整代码 const CracoLessPlugin = require('craco-less'); const path = require("path"); module.exports = { babel: { plugins: [ [ "import", { "libraryName": "antd", "libraryDirectory": "es", "style": true// true 针对less } ] ] }, plugins: [ { plugin: CracoLessPlugin, options: { lessLoaderOptions: { lessOptions: { modifyVars: { '@primary-color': '#1DA57A' }, //主题色 javascriptEnabled: true, }, }, }, }, ], //配置src路径 webpack: { alias: { "@": path.resolve("src"), }, }, }; |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |